<template>
  <div class="container">
    <h1>
      <span>实验教学项目特色</span>
    </h1>
    <div class="content">
      <div class="l_side">
        <h1 style="border:0;" id="1">1.实验方案设计思路</h1>
        <p>地层三维建模虚拟仿真实验以实现《构造地质学》“读断层地质图并求断面产状及断距”为目标，本着“虚拟仿真手段，实现地层建模，认识地层构造，分析演化规律”的实验教学理念，实现用直观形象的虚拟仿真手段达成本课程“综合分析某一地区地质构造特征及构造形成、发展与演化规律”之目的。传统的实习模式存在诸多的困难，为解决基于图纸的实验地质构造研判抽象、不直观、难重复的现实难题，本项目在充分满足教学的需求下，以虚拟现实技术为学生提供丰富多样的个性化学习环境，让学生在体验中学习、 在学习中感悟、在感悟中构建知识体系，实现―因材施教的教育理念，构建更完整的知识体系，提高人才培养质量。</p>
        <h1 style="border:0;" id="2">2.教学方法</h1>
        <p>VR技术运用于教学，打破了传统的教学模式，实现了教学类型、教学手段、 教学方法、教学形态以及教学空间的形态转换，以及在线教育与实体课堂的有机统一，教学中的教学方法也有其鲜明的特色，比如：虚拟场景练习法——在学生掌握操作规范后，让学生独立进行的模拟操作训练，学生可以在短时间内完成实验的全过程。</p>
        <p>充分利用信息化、VR、大数据等技术手段，以学生为中心，体现差异化、个性化的学习方式，采取“线上学习、线下翻转”互为补充，“课内研讨、课外实践”相辅相成的层次化、立体化教学模式。</p>
        <h1 style="border:0;" id="3">3.评价体系</h1>
        <p>①、&nbsp;线上自动评价与线下教师评价相结合；</p>
        <p>②、&nbsp;小组评价与组内自评相结合。</p>
        <h1 style="border:0;" id="4">4.传统教学的延伸与拓展</h1>
        <p>打破了传统的在地质图上分析断层、逆冲断层发育地区情况，可以有效解决基于图纸的实验地质构造研判抽象、不直观、难重复的现实难题。利用虚拟仿真现实技术再现、模拟地层结构、特征，掌握数字地层岩性属性查询、形态特征三维分析、地层断面产状判识、层间断距量测等操作；丰富了学习环境。</p>
      </div>
      <div class="r_side" id="r_side" >
        <div class="side_top">
          <div class="side-bar">
            <em class="circle start"></em>
            <em class="circle end"></em>
          </div>
          <div class="catalog-scroller">
            <dl class="catalog-list">
              <dt class="catalog-title level1">
                <em class="pointer"></em>
                <a href="#1" class="title-link">
                  <span class="text">
                    <span class="title-index">1</span>
                    <span class="title-link" title="实验方案设计思路">实验方案设计思路</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level2">
                <em class="pointer"></em>
                <a href="#2" class="title-link">
                  <span class="text">
                    <span class="title-index">2</span>
                    <span class="title-link" title="教学方法">教学方法</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level3">
                <em class="pointer"></em>
                <a href="#3" class="title-link">
                  <span class="text">
                    <span class="title-index">3</span>
                    <span class="title-link" title="评价体系">评价体系</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level4">
                <em class="pointer"></em>
                <a href="#4" class="title-link">
                  <span class="text">
                    <span class="title-index">4</span>
                    <span class="title-link" title="传统教学的延伸与拓展">传统教学的延伸...</span>
                  </span>
                </a>
              </dt>
            </dl>
          </div>
        </div>
        <div class="bottom-wrap">
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 10px 0 95px;
  box-sizing: border-box;
  h1 {
    width: 1123px;
    margin: 0 auto 30px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .content {
    width: 1123px;
    margin: 0 auto;
    padding: 35px 40px 80px;
    background: #fff;
    box-shadow: 0 0 10px #ddd;
    min-height: 550px;
    display: flex;
    justify-content: space-between;
    .l_side {
      width: 800px;
      h1 {
        width: 100%;
        font-size: 16px;
        color: #333333;
        margin: 15px 0 20px;
        text-align: center;
      }
      p {
        line-height: 30px;
        color: #666;
        font-size: 12px;
        margin-bottom: 10px;
        text-indent: 2em;
      }
    }
    .r_side {
      width: 180px;
      height: 400px;
      margin-top: 100px;
      position: relative;
      .side_top {
        display: flex;
        justify-content: space-between;
        .side-bar {
          height: 135px;
          border-left: 2px solid #eaeaea;
          width: 5%;
          position: relative;
          .circle {
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #eaeaea;
            border-radius: 50%;
          }
          .start {
            position: absolute;
            top: -8px;
            left: -6px;
          }
          .end {
            position: absolute;
            bottom: -8px;
            left: -6px;
          }
        }
        .catalog-scroller {
          background-color: #d7d7d5;
          .catalog-list {
            width: 100%;
            margin: 10px 0;
            position: relative;
            .catalog-title {
              position: absolute;
              left: -160px;
            }
            .level2 {
              top: 30px;
            }
            .level3 {
              top: 60px;
            }
             .level4 {
              top: 90px;
            }
            .title-link {
              font-size: 14px;
              color: #555;
              font-weight: 700;
            }
            .title-index {
              color: #999;
              font-weight: 700;
              font-family: Arial;
              font-size: 14px;
              padding-right: 5px;
            }
            .pointer {
              display: block;
              width: 10px;
              height: 10px;
              background-color: #eaeaea;
              border: 2px solid #fff;
              border-radius: 50%;
              position: absolute;
              left: -24px;
              top: 8px;
            }
            .catalog-title:hover a {
              background-color: #eaeaea;
              border-bottom: 1px solid #ccc;
            }
            .catalog-title:hover .pointer {
              background-color: #409eff;
            }
          }
        }
      }
      .bottom-wrap {
        width: 45px;
        height: 45px;
        border-radius: 3px;
        background-color: #eaeaea;
        text-align: center;
        position: absolute;
        left: -2px;
        top: 155px;
        .el-icon-arrow-up {
          color: #fff;
          font-size: 36px;
          line-height: 45px;
        }
      }
    }
  }
}
</style>


